<template>
  <!-- 图表 -->
  <div class="yq-user-info-heatmap" ref="heatmapEChart"/>

  <!-- 图表数据切换 -->
  <div class="heatmap-type-choice-btns">
    <div class="heatmap-type-content">{{ heatmap.type }}</div>

    <!-- 语雀热力图 -->
    <div class="heatmap-type-choice-btn">
      <svg aria-hidden="true" @click="getYqUpdateHeatmap">
        <use xlink:href="#icon-yuque1"></use>
      </svg>
    </div>

    <!-- 码云热力图 -->
    <div class="heatmap-type-choice-btn">
      <svg class="heatmap-type-btn-gitee" aria-hidden="true" @click="getGiteeUpdateHeatmap">
        <use xlink:href="#icon-gitee1"></use>
      </svg>
    </div>
  </div>
</template>

<script>
import {yqUpdateHeatmap} from '@/api/apis/yuque';
import {giteeUpdateHeatmap} from '@/api/apis/gitee';

import * as echarts from 'echarts/core';
import {
  TitleComponent,
  CalendarComponent,
  TooltipComponent,
  VisualMapComponent,
  LegendComponent // 散点
} from 'echarts/components';
import {HeatmapChart} from 'echarts/charts';
import {CanvasRenderer} from 'echarts/renderers';

import {ScatterChart, EffectScatterChart} from 'echarts/charts';
import {UniversalTransition} from 'echarts/features';

echarts.use([
  TitleComponent,
  CalendarComponent,
  TooltipComponent,
  VisualMapComponent,
  HeatmapChart,
  CanvasRenderer,

  // 散点
  LegendComponent,
  ScatterChart,
  EffectScatterChart,
  UniversalTransition
]);

export default {
  name: "YqGiteeHeatMap",
  data () {
    return {
      heatmap: {
        type: '语雀指数',
        chart: null,
        maxUpdateNum: 0,
        dateBegin: '',
        dateEnd: '',
        data: []
      }
    }
  },
  methods: {
    getYqUpdateHeatmap() {
      yqUpdateHeatmap().then(res => {
        let {code, data} = res;
        if (code === 20000) {
          this.heatmap.maxUpdateNum = data.maxUpdateNum;
          this.heatmap.dateBegin    = data.dateBegin;
          this.heatmap.dateEnd      = data.dateEnd;
          this.heatmap.data         = data.data;
          this.heatmap.type         = '语雀指数';
          this.renderHeatmap();
        }
      })
    },
    getGiteeUpdateHeatmap() {
      giteeUpdateHeatmap().then(res => {
        let {code, data} = res;
        if (code === 20000) {
          this.heatmap.maxUpdateNum = data.maxUpdateNum;
          this.heatmap.dateBegin    = data.dateBegin;
          this.heatmap.dateEnd      = data.dateEnd;
          this.heatmap.data         = data.data;
          this.heatmap.type         = '码云指数';
          this.renderHeatmap();
        }
      })
    },
    renderHeatmap() {
      let that = this;
      // 日历散点图
      this.heatmap.chart.setOption({
        // 越靠下的数值越高
        gradientColor: [
          '#494949',
          '#9b9b9b',
          '#b3b3b3',
        ],
        tooltip: {
          backgroundColor: '#2d3239',
          borderColor: '#1f1f1f',
          textStyle: {
            color: '#7a7a7a'
          },
          formatter: (params) => {
            let date = params.data[0];
            let num = params.data[1];
            if (that.heatmap.type === '语雀指数') {
              return "<div style='text-align: left'>" +
                  date + ' 日 <br/>' +
                  '编辑 [ ' + num + ' ] 篇文章' +
                  "</div>";
            } else {
              return "<div style='text-align: left'>" +
                  date + ' 日 <br/>' +
                  '提交 [ ' + num + ' ] 次代码' +
                  "</div>";
            }
          },
        },
        calendar: [{
          top: 40,
          bottom: 5,
          left: 30,
          right: 30,
          cellSize: ['auto', 30],
          range: [this.heatmap.dateBegin, this.heatmap.dateEnd],
          splitLine: {
            show: true,
            lineStyle: {
              color: '#1f1f1f',
              width: 2,
              type: 'solid'
            }
          },
          itemStyle: {
            color: '#2d3239',
            borderWidth: 1,
            borderColor: '#1f1f1f'
          },
          yearLabel: {show: false},
          monthLabel: {nameMap: 'ZH'},
          dayLabel: {nameMap: 'ZH', firstDay: 1}
        }],
        visualMap: [{
          top: 10,
          left: 300,
          min: 0,
          max: this.heatmap.maxUpdateNum,
          show: false
        }],
        series: [
          {
            type: 'scatter',
            coordinateSystem: 'calendar',
            data: this.heatmap.data,
            symbolSize: (val) => {
              if (val[1] === 0) {
                return 0;
              } else {
                return 10;
              }
            }
          },
          {
            type: 'effectScatter',
            coordinateSystem: 'calendar',
            // 排序后选最多的5个
            data: this.heatmap.data
                .sort( (a, b) => {
                  return b[1] - a[1];
                }).slice(0, 5),
            // 何时显示特效
            showEffectOn: 'render',
            // 涟漪特效的配置
            rippleEffect: {
              number: 3,
              brushType: 'stroke'
            },
            zlevel: 1
          }
        ]
      });
    }
  },
  mounted() {
    this.heatmap.chart = echarts.init(this.$refs.heatmapEChart);
    if (this.heatmap.type === '语雀指数') {
      this.getYqUpdateHeatmap();
    } else {
      this.getGiteeUpdateHeatmap();
    }
  }
}
</script>

<style scoped lang="scss">
// 整体左边距
$info-margin-left: 130px;

.yq-user-info-heatmap {
  @include box(330px, 175px);
  //margin-left: calc(#{$info-margin-left} - 10px);
}

.heatmap-type-choice-btns {
  @include flex(row, flex-start, flex-start);
  @include box(100%, 30px);
  margin-top: 8px;

  .heatmap-type-content {
    @include box(85px, 30px);
    @include font(12px, #1f1f1f, 700);
  }

  .heatmap-type-choice-btn {
    @include box(30px, 30px);
    @include border(1px, #1f1f1f, 3px);
    margin: 0 20px 0 25px;
    padding: 5px 3px;
    transition: box-shadow 0.4s;
    cursor: pointer;

    &:hover {
      box-shadow: 0 0 10px 1px rgba(24, 18, 18, 0.5);
    }

    svg {
      width: 20px;
      height: 20px;
    }
  }
}
</style>